<template>
  <div>
    <el-container class="box" direction="vertical">
      <!-- 头部区域 -->
      <el-header height="133px" class="height">
        <div style="display: flex; align-items: center">
          <img src="@/assets/image/logo.png" alt="" />
          <div>
            <span>欢迎登陆</span>
          </div>
        </div>

        <div @click="goHome">
          <span>进入网站首页>></span>
        </div>
      </el-header>
      <!-- 主体区域 -->
      <el-main class="content">
        <el-card class="box-card">
          <div class="clearfix">
            <span>账户登录</span>
            <span>扫码登录</span>
          </div>
          <div class="message">
            <div><i class="el-icon-message"></i><span>使用短信登录</span></div>
            <el-input
              prefix-icon="el-icon-user"
              placeholder="请输入账号"
              type="text"
              v-model="account"
            ></el-input>
            <el-input
              prefix-icon="el-icon-lock"
              placeholder="请输入密码"
              type="password"
              v-model="password"
            ></el-input>
            <div class="checkBox">
              <el-checkbox v-model="isChecked"
                >我已同意<span>《隐私条款》</span>和<span
                  >《服务条款》</span
                ></el-checkbox
              >
            </div>
            <div>
              <el-button type="success" style="width: 100%" @click="login"
                >登录</el-button
              >
            </div>
            <div class="login">
              <div class="qqImage">
                <span style="color: gray">登录</span>
              </div>
              <div style="color: gray">
                <span>忘记密码</span><span>免费注册</span>
              </div>
            </div>
          </div>
        </el-card>
      </el-main>
      <!-- 底部区域 -->
      <el-footer height="159.2px" class="footer">
        <div>
          <span
            >关于我们 │ 帮助中心 │ 售后服务 │ 配送与验收 │ 商务合作 │ 搜索推荐 │
            友情链接</span
          >
          <p>CopyRight ◎小兔鲜儿</p>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      account: "xiaotuxian001",
      password: "123456",
      isChecked: false,
    };
  },

  methods: {
    //登录
    login() {
      const { account, password } = this;
      if (this.isChecked) {
        this.$store.dispatch("login", { account, password });
        this.$message.success("登陆成功");
        setTimeout(() => {
          this.$router.push("/home");
        }, 1000);
      } else {
        this.$message.error("请勾选同意用户协议");
      }
    },
    //去首页
    goHome() {
      this.$router.push("/home");
    },
  },
};
</script>

<style scoped>
.box {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
}
.height {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10%;
}
.height img {
  width: 25%;
  margin-right: 10px;
}
.height span {
  font-size: 22px;
  color: gray;
  display: inline-block;
  padding-top: 40px;
}
.content {
  background: url(@/assets/image/background.png) center center no-repeat;
}
.box-card {
  width: 26%;
  position: absolute;
  right: 12%;
  top: 21%;
}
.clearfix {
  display: flex;
  justify-content: space-around;
  border-bottom: 1px solid #eee;
  padding-bottom: 13px;
}
.message {
  height: 300px;
  color: yellowgreen;
  padding: 0 20px;
  text-align: right;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}
.checkBox {
  text-align: left;
}
.checkBox span {
  color: blue;
}
.login {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.login span {
  padding-left: 10px;
}
.qqImage {
  width: 15%;
  text-align: left;
  color: #eee;
}
.footer {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: gray;
}
</style>